<template>
  <div class="search">
    <Card class="myCard" style="margin-bottom: 20px">
      <p class="moneysss">钱包余额：焕贝{{ moneysss.allMoney }}</p>
      <p class="moneysss">充值钱包：焕贝{{ moneysss.rechargeMoney }}</p>
      <p class="moneysss">推广钱包：焕贝{{ moneysss.promoteMoney }}</p>
      <p class="moneysss">销售钱包：焕贝{{ moneysss.saleMoney }}</p>
    </Card>
    <Card>
      <Tabs value="RETURN_MONEY" @on-click="handleClickType">
        <TabPane label="支出" name="RETURN_MONEY">
          <Row @keydown.enter.native="handleSearch">
            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
              <FormItem label="流水号">
                <Input type="text" v-model="searchForm.sn" clearable placeholder="请输入流水号" style="width: 200px" />
              </FormItem>
              <Form-item label="支出类型">
                <Select v-model="searchForm.transactionType" placeholder="请选择" clearable style="width: 200px">
                  <Option value="WALLET_WITHDRAWAL">余额提现</Option>
                  <Option value="WALLET_WITHDRAWALREFUND">余额提现退回</Option>
                  <Option value="WALLET_PAY">余额支付</Option>
                  <Option value="WALLET_REFUND">余额退款</Option>
                  <Option value="WALLET_RECHARGE">余额充值</Option>
                  <Option value="WALLET_COMMISSION">佣金提成</Option>
                  <Option value="WALLET_COMMISSIONREFUND">佣金提成退款</Option>
                  <Option value="WALLET_COMMISSION_HY">佣金提成-会员费</Option>
                  <Option value="WALLET_COMMISSION_HY_REFUND">佣金提成退款-会员费</Option>
                  <Option value="WALLET_COMMISSION_FW">佣金提成-服务费</Option>
                  <Option value="WALLET_COMMISSION_FW_REFUND">佣金提成退款-服务费</Option>
                  <Option value="WALLET_COMMISSION_TS">佣金提成-天使</Option>
                  <Option value="WALLET_COMMISSION_TS_REFUND">佣金提成退款-天使</Option>
                  <Option value="WALLET_COMMISSION_SY">佣金提成-事业</Option>
                  <Option value="WALLET_COMMISSION_SY_REFUND">佣金提成退款-事业</Option>
                  <Option value="WALLET_DEPARTMENT">授信拨款</Option>
                  <Option value="WALLET_REPAY">授信还款</Option>
                  <Option value="WALLET_COLLECT">运费</Option>
                  <Option value="WALLET_WITHDRAWALREFUND">余额提现退回</Option>
                </Select>
              </Form-item>
              <Form-item label="时间">
                <Date-picker type="daterange" placement="bottom-end" placeholder="选择起始时间" style="width: 200px"
                  @on-change="changeTime"></Date-picker>
              </Form-item>
              <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
            </Form>
          </Row>
          <Table :loading="loading" border class="mt_10" :columns="columnsExport" :data="data" ref="table"></Table>
          <Row type="flex" justify="end" class="mt_10">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small"
              show-total show-elevator show-sizer></Page>
          </Row>
        </TabPane>
        <TabPane label="收入" name="RETURN_MONEY2">
          <Row @keydown.enter.native="handleSearch">
            <Form ref="searchForm2" :model="searchForm2" inline :label-width="70" class="search-form">
              <FormItem label="流水号">
                <Input type="text" v-model="searchForm2.sn" clearable placeholder="请输入流水号" style="width: 200px" />
              </FormItem>
              <Form-item label="收入类型">
                <Select v-model="searchForm2.transactionType" placeholder="请选择" clearable style="width: 200px">
                  <Option value="WALLET_WITHDRAWAL">余额提现</Option>
                  <Option value="WALLET_WITHDRAWALREFUND">余额提现退回</Option>
                  <Option value="WALLET_PAY">余额支付</Option>
                  <Option value="WALLET_REFUND">余额退款</Option>
                  <Option value="WALLET_RECHARGE">余额充值</Option>
                  <Option value="WALLET_COMMISSION">佣金提成</Option>
                  <Option value="WALLET_COMMISSIONREFUND">佣金提成退款</Option>
                  <Option value="WALLET_COMMISSION_HY">佣金提成-会员费</Option>
                  <Option value="WALLET_COMMISSION_HY_REFUND">佣金提成退款-会员费</Option>
                  <Option value="WALLET_COMMISSION_FW">佣金提成-服务费</Option>
                  <Option value="WALLET_COMMISSION_FW_REFUND">佣金提成退款-服务费</Option>
                  <Option value="WALLET_COMMISSION_TS">佣金提成-天使</Option>
                  <Option value="WALLET_COMMISSION_TS_REFUND">佣金提成退款-天使</Option>
                  <Option value="WALLET_COMMISSION_SY">佣金提成-事业</Option>
                  <Option value="WALLET_COMMISSION_SY_REFUND">佣金提成退款-事业</Option>
                  <Option value="WALLET_DEPARTMENT">授信拨款</Option>
                  <Option value="WALLET_REPAY">授信还款</Option>
                  <Option value="WALLET_COLLECT">运费</Option>
                  <Option value="WALLET_WITHDRAWALREFUND">余额提现退回</Option>
                </Select>
              </Form-item>
              <Form-item label="支付时间">
                <Date-picker type="daterange" placement="bottom-end" placeholder="选择时间" style="width: 200px"
                  @on-change="changeTime2"></Date-picker>
              </Form-item>
              <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
              <!-- <Button @click="handleReset" class="search-btn">重置</Button> -->
            </Form>
          </Row>
          <Table :loading="loading" border class="mt_10" :columns="columnsEnter" :data="data" ref="table"></Table>
          <Row type="flex" justify="end" class="mt_10">
            <Page :current="searchForm2.pageNumber" :total="total" :page-size="searchForm2.pageSize"
              @on-change="changePage2" @on-page-size-change="changePageSize2" :page-size-opts="[10, 20, 50]"
              size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
  import * as API_Shop from "@/api/shops";

  export default {
    name: "accountStatementBill",
    data() {
      return {
        moneysss: {
          allMoney: 0,
          inMoney: 0,
          outMoney: 0,
        },
        loading: true, // 表单加载状态
        selectInfo: "c",
        searchForm: {
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "createTime", // 默认排序字段
          order: "desc", // 默认排序方式
          sn: "", // 订单号
          transactionType: "", // 交易类型
          startDate: "", // 起始时间
          endDate: "", // 终止时间
        },
        searchForm2: {
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "createTime", // 默认排序字段
          order: "desc", // 默认排序方式
          sn: "", // 订单号
          transactionType: "", // 交易类型
          startDate: "", // 起始时间
          endDate: "", // 终止时间
        },
        // 支出
        columnsExport: [{
            title: "流水号",
            key: "sn",
            minWidth: 250,
            tooltip: true,
          },
          {
            title: "支出类型",
            key: "transactionType",
            minWidth: 120,
            render: (h, params) => {
              if (params.row.transactionType == "WALLET_WITHDRAWAL") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额提现")]);
                }
              } else if (params.row.transactionType == "WALLET_WITHDRAWALREFUND") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额提现退回")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额提现退回")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额提现退回")]);
                }
              } else if (params.row.transactionType == "WALLET_PAY") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额支付")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额支付")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额支付")]);
                }
              } else if (params.row.transactionType == "WALLET_REFUND") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额退款")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额退款")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额退款")]);
                }
              } else if (params.row.transactionType == "余额充值") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额充值")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额充值")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额充值")]);
                }
              } else if (params.row.transactionType == "WALLET_COMMISSION") {
                return h("div", [h("span", {}, "佣金提成")]);
              } else if (params.row.transactionType == "WALLET_COMMISSIONREFUND") {
                return h("div", [h("span", {}, "佣金提成退款")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_HY") {
                return h("div", [h("span", {}, "佣金提成-会员费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_HY_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-会员费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_FW") {
                return h("div", [h("span", {}, "佣金提成-服务费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_FW_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-服务费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_TS") {
                return h("div", [h("span", {}, "佣金提成-天使")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_TS_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-天使")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_SY") {
                return h("div", [h("span", {}, "佣金提成-事业")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_SY_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-事业")]);
              } else if (params.row.transactionType == "WALLET_COLLECT") {
                return h("div", [h("span", {}, "运费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSIONREFUND") {
                return h("div", [h("span", {}, "佣金提成退款")]);
              }
            },
          },
          {
            title: "金额",
            key: "money",
            minWidth: 100,
            render: (h, params) => {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.money, "焕贝")
              );
            },
          },
          {
            title: "时间",
            key: "createTime",
            width: 200,
            tooltip: true,
          }, {
            title: "备注",
            key: "remark",
            minWidth: 100,
            tooltip: true,
          },
        ],
        // 收入
        columnsEnter: [{
            title: "流水号",
            key: "sn",
            minWidth: 250,
            tooltip: true,
          },
          {
            title: "收入类型",
            key: "transactionType",
            minWidth: 120,
            render: (h, params) => {
              if (params.row.transactionType == "WALLET_WITHDRAWAL") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额提现")]);
                }
              } else if (params.row.transactionType == "WALLET_WITHDRAWALREFUND") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额提现退回")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额提现退回")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额提现退回")]);
                }
              } else if (params.row.transactionType == "WALLET_PAY") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额支付")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额支付")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额支付")]);
                }
              } else if (params.row.transactionType == "WALLET_REFUND") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额退款")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额退款")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额退款")]);
                }
              } else if (params.row.transactionType == "余额充值") {
                if (params.row.payeeOwner == "RECHARGE") {
                  return h("div", [h("span", {}, "充值钱包余额充值")]);
                } else if (params.row.payeeOwner == "PROMOTE") {
                  return h("div", [h("span", {}, "推广钱包余额充值")]);
                } else if (params.row.payeeOwner == "PROMOTE_HY") {
                  return h("div", [h("span", {}, "推广钱包-会员费 余额提现")]);
                } else if (params.row.payeeOwner == "PROMOTE_FW") {
                  return h("div", [h("span", {}, "推广钱包-服务费 余额提现")]);
                } else {
                  return h("div", [h("span", {}, "销售钱包余额充值")]);
                }
              } else if (params.row.transactionType == "WALLET_COMMISSION") {
                return h("div", [h("span", {}, "佣金提成")]);
              } else if (params.row.transactionType == "WALLET_COMMISSIONREFUND") {
                return h("div", [h("span", {}, "佣金提成退款")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_HY") {
                return h("div", [h("span", {}, "佣金提成-会员费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_HY_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-会员费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_FW") {
                return h("div", [h("span", {}, "佣金提成-服务费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_FW_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-服务费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_TS") {
                return h("div", [h("span", {}, "佣金提成-天使")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_TS_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-天使")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_SY") {
                return h("div", [h("span", {}, "佣金提成-事业")]);
              } else if (params.row.transactionType == "WALLET_COMMISSION_SY_REFUND") {
                return h("div", [h("span", {}, "佣金提成退款-事业")]);
              } else if (params.row.transactionType == "WALLET_COLLECT") {
                return h("div", [h("span", {}, "运费")]);
              } else if (params.row.transactionType == "WALLET_COMMISSIONREFUND") {
                return h("div", [h("span", {}, "佣金提成退款")]);
              }
            },
          },
          {
            title: "金额",
            key: "money",
            minWidth: 100,
            render: (h, params) => {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.money, "焕贝")
              );
            },
          },
          {
            title: "时间",
            key: "createTime",
            width: 200,
            tooltip: true,
          }, {
            title: "备注",
            key: "remark",
            minWidth: 100,
            tooltip: true,
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
      };
    },
    methods: {
      //切换tab
      handleClickType(v) {
        if (v == 'RETURN_MONEY2') {
          this.searchForm2.pageNumber = 1
          this.searchForm2.pageSize = 10
        } else {
          this.searchForm.pageNumber = 1
          this.searchForm.pageSize = 10
        }
        this.selectInfo = v == "RETURN_MONEY2" ? "r" : "c";
        this.getDataList(v == "RETURN_MONEY2" ? "r" : "c");
      },
      // 初始化数据
      init() {
        this.getDataList("c");
        this.getAllStore();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList(this.selectInfo);
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getDataList(this.selectInfo);
      },
      // 分页 改变页码
      changePage2(v) {
        this.searchForm2.pageNumber = v;
        this.getDataList(this.selectInfo);
      },
      // 分页 改变页数
      changePageSize2(v) {
        this.searchForm2.pageSize = v;
        this.getDataList(this.selectInfo);
      },
      // 搜索
      handleSearch() {
        if (this.selectInfo == 'c') {
          this.searchForm.pageNumber = 1;
          this.searchForm.pageSize = 10;
        } else {
          this.searchForm2.pageNumber = 1;
          this.searchForm2.pageSize = 10;
        }
        this.getDataList(this.selectInfo);
      },
      // 重置
      handleReset() {
        this.searchForm = {};
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      // 获取列表数据
      getDataList(v) {
        let userInfo = JSON.parse(this.getStore("userInfo"));
        this.loading = true;
        if (v == "c") {
          if (this.searchForm.transactionType == undefined) {
            this.searchForm.transactionType = ''
          }
          let obj = {
            pageNumber: this.searchForm.pageNumber,
            pageSize: this.searchForm.pageSize,
            memberId: userInfo.memberId,
            sn: this.searchForm.sn,
            startTime: this.searchForm.startDate,
            endTime: this.searchForm.endDate,
            transactionType: this.searchForm.transactionType,
          };

          API_Shop.outlayStore(obj).then((res) => {
            this.loading = false;
            if (res.success) {
              this.data = res.result.records;
              this.total = res.result.total;
            }
          });
        } else {
          if (this.searchForm2.transactionType == undefined) {
            this.searchForm2.transactionType = ''
          }
          let obj = {
            pageNumber: this.searchForm2.pageNumber,
            pageSize: this.searchForm2.pageSize,
            memberId: userInfo.memberId,
            sn: this.searchForm2.sn,
            startTime: this.searchForm2.startDate,
            endTime: this.searchForm2.endDate,
            transactionType: this.searchForm2.transactionType,
          };
          API_Shop.incomeStore(obj).then((res) => {
            this.loading = false;
            if (res.success) {
              this.data = res.result.records;
              this.total = res.result.total;
            }
          });
        }

        // this.total = this.data.length;
        this.loading = false;
      },
      // 查看详情
      detail(v) {
        let id = v.id;
        this.$router.push({
          name: "bill-detail",
          query: {
            id: id
          },
        });
      },

      // 选择时间
      changeTime(time) {
        let [t, e] = time;
        this.searchForm.startDate = t;
        this.searchForm.endDate = e;
      },
      changeTime2(time) {
        let [t, e] = time;
        this.searchForm2.startDate = t;
        this.searchForm2.endDate = e;
      },
      // 综合金额
      getAllStore() {
        let userInfo = JSON.parse(this.getStore("userInfo"));
        let obj = {
          memberId: userInfo.memberId,
        };
        API_Shop.allStore(obj).then((res) => {
          if (res.success) {
            this.moneysss = res.result;
          }
        });
      },
    },
    mounted() {
      this.init();
    },
    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    },
  };
</script>
<style lang="scss" scoped>
  // 建议引入通用样式 可删除下面样式代码
  @import "@/styles/table-common.scss";

  /deep/ .ivu-col {
    min-height: 100vh;
  }

  /deep/ .ivu-card-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .moneysss {
    font-size: 16px;
    padding: 5px;
    font-weight: bold;
  }

  .ivu-table-wrapper {
    min-height: 200px;
  }
</style>
